<template>
  <view class="rounded mr-2 px-2 py-1" @click="clickEvent" :class="disabled ? 'bg-light border' : 'main-bg-color'">
    <text class="font" :class="disabled ? 'text-light-muted' : 'text-white'">{{name}}</text>
  </view>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: ""
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      clickEvent() {
        if (!this.disabled) {
          this.$emit('click')
        }
      }
    }
  }
</script>

<style>
</style>